<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>N8N Workflow Collection - Search & Browse 2000+ Workflows</title>
    <meta name="description" content="Browse and search through 2000+ n8n workflow automations. Find workflows for Telegram, Discord, Gmail, AI, and hundreds of other integrations.">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1 class="logo">
                <span class="logo-emoji">⚡</span>
                N8N Workflow Collection
            </h1>
            <p class="tagline">Search & Browse <span id="total-count">2000+</span> Professional Automation Workflows</p>
        </div>
    </header>

    <main class="container">
        <!-- Search Section -->
        <section class="search-section">
            <div class="search-container">
                <div class="search-box">
                    <input
                        type="text"
                        id="search-input"
                        placeholder="Search workflows... (e.g., telegram, calculation, gmail)"
                        autocomplete="off"
                    >
                    <button id="search-btn" class="search-btn">
                        <span class="search-icon">🔍</span>
                    </button>
                </div>

                <div class="filters">
                    <select id="category-filter">
                        <option value="">All Categories</option>
                    </select>

                    <select id="complexity-filter">
                        <option value="">All Complexity</option>
                        <option value="low">Low (≤5 nodes)</option>
                        <option value="medium">Medium (6-15 nodes)</option>
                        <option value="high">High (16+ nodes)</option>
                    </select>

                    <select id="trigger-filter">
                        <option value="">All Triggers</option>
                        <option value="Manual">Manual</option>
                        <option value="Webhook">Webhook</option>
                        <option value="Scheduled">Scheduled</option>
                        <option value="Complex">Complex</option>
                    </select>
                </div>
            </div>
        </section>

        <!-- Stats Section -->
        <section class="stats-section">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number" id="workflows-count">-</div>
                    <div class="stat-label">Total Workflows</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="active-count">-</div>
                    <div class="stat-label">Active Workflows</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="integrations-count">-</div>
                    <div class="stat-label">Integrations</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" id="categories-count">-</div>
                    <div class="stat-label">Categories</div>
                </div>
            </div>
        </section>

        <!-- Results Section -->
        <section class="results-section">
            <div class="results-header">
                <h2 id="results-title">Featured Workflows</h2>
                <div class="results-count" id="results-count"></div>
            </div>

            <div id="loading" class="loading hidden">
                <div class="spinner"></div>
                <span>Loading workflows...</span>
            </div>

            <div id="results-grid" class="results-grid">
                <!-- Workflow cards will be inserted here -->
            </div>

            <div id="no-results" class="no-results hidden">
                <div class="no-results-icon">🔍</div>
                <h3>No workflows found</h3>
                <p>Try adjusting your search terms or filters</p>
            </div>

            <button id="load-more" class="load-more hidden">Load More Workflows</button>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>
                🚀 Powered by the
                <a href="https://github.com/Zie619/n8n-workflows" target="_blank">N8N Workflow Collection</a>
                | Built with ❤️ for the n8n community
            </p>
            <p class="footer-links">
                <a href="https://n8n.io" target="_blank">n8n.io</a> |
                <a href="https://community.n8n.io" target="_blank">Community</a> |
                <a href="https://docs.n8n.io" target="_blank">Documentation</a>
            </p>
            <p class="footer-meta">Last updated: September 2025</p>
        </div>
    </footer>

    <script src="js/search.js"></script>
    <script src="js/app.js"></script>
</body>
</html>